<template>
  <div class="homePage">
    <div id="https_popup" onclick="window.location.href='https://workwiz.co.kr'" style="display:none;cursor:pointer;position: fixed; z-index: 99999999999; text-align: center; width: 100%; height: 100vh; top: 0; left: 0; background: white;">
      <img src="/https_popup.jpeg" style="width: 100%; max-width: 1100px; margin-top: 90px;">
    </div>
    <div class="banner" v-loading="loading">
      <div class="mainSwiper">
        <swiper :options="swiperOption" ref="mySwiper" v-if="bannerData.length">
            <swiper-slide v-for="(item,index) in bannerData" :key="index">
              <a v-if="item.url&&item.url!='#'&&item.url!='null'" :href="item.url" target="_blank">
                <img class="big" :src="item.image" :alt="item.name">
              </a>
              <img v-else class="big" :src="item.image" :alt="item.name">
            </swiper-slide>
        </swiper>
        <div class="ctls" v-show="isShowCtls">
          <div class="pager" id="pager1"></div>
          <a href="javascript:;" target="_self" class="btn" id="btnPrev1"></a>
          <a href="javascript:;" target="_self" class="btn next" id="btnNext1"></a>
        </div>
      </div>
    </div>
    <div class="slogan">
      <h2>Workwiz <span>Network</span></h2>
      <p>일자리를 찾기 위해 여러 사이트를 헤매지 마세요<br><b>중장년 전문 플랫폼 워크위즈 단 한 곳에서 재취업의 기회를 만들어보세요.</b></p>
    </div>
    <div class="totals">
      <div class="item">
        <countTo class="num" :startVal='0' :endVal='statistics.newJobs' :duration='3000' separator=','></countTo>
        <label>오늘의 신규 일자리</label>
      </div>
      <div class="item">
        <countTo class="num" :startVal='0' :endVal='statistics.allJobs' :duration='3000' separator=','></countTo>
        <label>누적 일자리</label>
      </div>
      <div class="item">
        <countTo class="num" :startVal='0' :endVal='statistics.allCVs' :duration='3000' separator=','></countTo>
        <label>전체 이력서</label>
      </div>
    </div>
    <div class="diagram">
      <div id="diagramBox">
        <iframe width="100%" height="100%" scrolling="no" src="https://workwiz.cafe24.com/job/chart_job.php" frameborder="0"></iframe>
      </div>
    </div>
    <div class="comBox">
      <div class="tit">
        <h3>코칭 서비스 <span>오픈!</span></h3>
        <p>워크위즈의 중장년 재취업 전문 온라인 코칭 서비스를 이용해보세요.<br/>취업 컨설턴트가 당신의 재취업 성공을 도와드립니다.</p>
      </div>
      <div class="list">
        <div class="top">
          <router-link to="/coach">+ <b>MORE</b></router-link>
        </div>
        <ul class="serviceList">
          <li v-for="(item,index) in serviceList" :key="index">
            <div class="pic">
              <img :src="item.icon" alt="">
            </div>
            <div class="info">
              <label>{{item.company}}</label>
              <strong>{{item.title}}</strong>
              <p class="des" v-html="item.info"></p>
            </div>
            <router-link :to="item.path" class="btn">자세히보기</router-link>
          </li>
        </ul>
      </div>
    </div>
    <div class="comBox">
      <div class="tit">
        <h4>주요채용공고</h4>
        <p>워크위즈에 등록된 채용공고를 확인해보세요.</p>
      </div>
      <div class="jobs">
        <div class="list">
          <div class="top">
            <router-link to="/job">전체보기</router-link>
          </div>
          <ul>
            <li v-for="(item,index) in jobList" :key="index">
              <div class="pic">
                <img src="@images/ico_job.png" alt="">
              </div>
              <div class="info">
                <label>{{item.companyName||item.user.company}}</label>
                <strong>{{item.title}}</strong>
                <p class="t">
                  <template v-if="item.jobs[0]">
                    {{item.jobs[0].job1&&item.jobs[0].job1.name}}/{{item.jobs[0].job2&&item.jobs[0].job2.name}}
                  </template>
                </p>
                <p>
                  <template v-if="item.areas[0]">
                  {{item.areas[0].area1&&item.areas[0].area1.name}} <em v-if="item.areas[0].area2">></em> {{item.areas[0].area2&&item.areas[0].area2.name}}  |
                  </template>
                  {{item.deadline}} 마감
                </p>
                <p class="v"><em>{{item.source&&item.source!=0?item.source:'워크위즈'}}</em>에서 <em>{{curToThousands(item.readCount||0)}}</em> 번 조회</p>
              </div>
              <div class="bom">
                <a href="javascript:;" target="_self" class="btn ico_view" @click="showInfo(item.id)">자세히보기</a>
                <a href="javascript:;" target="_self" :class="['btn ico_favo',item.collect&&'collect']" @click="collect(item,index,2)">찜하기</a>
              </div>
            </li>
          </ul>
        </div>
        <div class="jobSwiper">
            <swiper :options="swiperOption2" ref="mySwiper2" v-if="sub_banner.length">
                <swiper-slide v-for="(item,index) in sub_banner" :key="index">
                    <a v-if="item.url&&item.url!='#'&&item.url!='null'" :href="item.url" target="_blank">
                      <img class="big" :src="item.image" :alt="item.name">
                    </a>
                    <img v-else class="big" :src="item.image" :alt="item.name">
                </swiper-slide>
            </swiper>
            <div class="ctls" v-show="sub_banner.length">
              <div class="pager" id="pager2"></div>
              <a href="javascript:;" target="_self" class="btn" id="btnPrev2"></a>
              <a href="javascript:;" target="_self" class="btn next" id="btnNext2"></a>
            </div>
          </div>
      </div>
    </div>
    <div class="comBox">
      <div class="tit">
        <h4>취업성공전략</h4>
        <p>워크위즈에서 제공하는 취업성공전략 노하우로 취업 성공에 도전해보세요.</p>
      </div>
      <div class="list">
          <div class="top">
            <router-link to="/help/matching">전체보기</router-link>
          </div>
          <ul class="videoList">
             <li v-for="(item,index) in sucessList" :key="index">
              <router-link :to="`/help/matchingView?id=${item.id}`">
                <div class="pic">
                  <div class="img" v-if="item.image&&item.image.url" v-lazy:background-image="item.image.url"></div>
                </div>
                <strong>{{item.title}}</strong>
                <span>조회 <em>{{item.readCount}}</em> · 등록 {{item.created_at}}</span>
              </router-link>
            </li>
          </ul>
      </div>
    </div>
    <el-dialog v-if="boxData" class="dialogIndexBox" :close-on-press-escape="false" :closeOnClickModal="false" :visible.sync="showBox">
      <div class="box" v-if="item.show"  v-for="(item,index) in boxData" :key="index">
        <div class="pic">
          <a :href="item.url" target="_blank" rel="noopener noreferrer">
            <img :src="item.image.url" :alt="item.title">
          </a>
        </div>
        <div class="btns">
          <el-button @click="closeBox(1,index,item.id)">오늘은 그만보기</el-button>
          <el-button @click="closeBox(2,index)">닫기</el-button>
        </div>
      </div>
    </el-dialog>
    <resume-card :cardParams="cardData"></resume-card>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { indexWindows, getHome, jobOption, myJobCollect } from '@/api';
import { Local, toThousands } from '@/utils'
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import countTo from 'vue-count-to';
import resumeCard from '@/components/resumeCard'

export default {
  name:'',
  components:{
    swiper,
    swiperSlide,
    countTo,
    resumeCard
  },
  props:[],
  data(){
    let _this=this;
    return {
      loading:true,
      isShowCtls:false,
      cardData:null,
      curBannerIndex:0,
      bannerData:[],
      serviceList:[
        {
          id:1,
          path:'/coach/online',
          icon:require('@/assets/images/icons/1.png'),
          company:'취업 상담',
          title:'실시간 화상통화를 활용한 취업 상담 서비스',
          info:'인생2막 설계에 노하우를 가지고 있는 <br/>전문 상담사가 온라인 화상 통화를 <br/>활용하여, 실시간으로<br/>상담 서비스를 제공합니다.<br/><br/>막연한 인생2막의 방향을<br/>함께 고민합니다.<br/>'
        },
        {
          id:2,
          path:'/coach/resume',
          icon:require('@/assets/images/icons/2.png'),
          company:'이력서 클리닉',
          title:'이력서 진단, 분석 및 이력서 작성 가이드 서비스',
          info:'이력서 작성에 어려움을 가진 <br/>분들에게 역량과 경험이 돋보일 수 <br/>있도록 보내주신 이력서를 진단하고<br/>분석한 후 이력서 작성 가이드를<br/>제시해 드립니다.'
        },
        {
          id:3,
          path:'/coach/matching',
          icon:require('@/assets/images/icons/3.png'),
          company:'채용정보서칭',
          title:'온라인 취업 정보 검색 대행 서비스',
          info:'나에게 맞는 일자리는 어디에 <br/>있을까요? 취업 정보 사이트<br/>(잡코리아, 사람인, 워크넷 등)에<br/>게시된 채용정보 중, 내가 도전할 <br/>수 있는 일자리 정보를 일자리 <br/>잡 매니저가 대신 찾아드립니다.'
        },
        {
          id:4,
          path:'/coach/basic',
          icon:require('@/assets/images/icons/4.png'),
          company:'모의 서류전형',
          title:'유사업종 대표 및 인사 담당자 이력서 검토 서비스',
          info:'이력서 제출 전에 내 이력서가<br/>매력적으로 보일지 현장에 있는<br/>대표자 및 인사 담당자에게<br/>직접 피드백을 받아보세요.<br/><br/>생생한 실전 피드백으로 이력서<br/>서류 심사의 가능성을 높여드립니다.'
        },
        {
          id:5,
          path:'/coach/interview',
          icon:require('@/assets/images/icons/5.png'),
          company:'모의 면접',
          title:'실시간 온라인 모의 면접 서비스',
          info:'면접 날짜가 잡혔나요?<br/>전문 면접관으로부터 언제 어디서나 내가 원하는 장소에서 온라인으로 모의 면접을 진행해보세요.<br/><br/>전문가의 컨설팅으로 실전 면접<br/>스킬이 향상됩니다.'
        }
      ],
      buildingIco:require('@/assets/images/building.png'),
      swiperOption: {
        loop: true,
        speed:500,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false,
        },
        pagination: {
          el: '#pager1',
          clickable :true,
        },
        navigation: {
          nextEl: '#btnNext1',
          prevEl: '#btnPrev1',
        },
        on:{
          slideChange: function(){
            _this.curBannerIndex=this.realIndex;
          },
        },
      },
      swiperOption2: {
        loop: true,
        speed:500,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false,
        },
        pagination: {
          el: '#pager2',
          clickable :true,
        },
        navigation: {
          nextEl: '#btnNext2',
          prevEl: '#btnPrev2',
        },
      },
      showBox:false,
      timer:null,
      boxData:null,
      statistics:{
        newJobs:0,
        allJobs:0,
        allCVs:0
      },
      jobList:[],
      sucessList:[],
      sub_banner:[]
    }
  },
  computed:{
    ...mapState(['errorAvatar2','defaultAvatar','errorThumb']),
  },
  beforeCreate() {
  },
  created(){
    this.getHome()
  },
  mounted(){
    this.redirect_to_https()
  },
  methods:{
    redirect_to_https(){
      if(location.href === "http://workwiz.co.kr" || location.href === "http://workwiz.co.kr/" || location.href === "http://localhost:8081/")
        document.getElementById("https_popup").style.display = "block";
    },
    async getHome(){
      let _this=this, res = await getHome();
      if (res.code == 200) {
        this.statistics=res.data.statistics;
        this.jobList=res.data.jobList;
        this.sucessList=res.data.sucessList;
        this.bannerData=res.data.main_banner;
        this.sub_banner=res.data.sub_banner;
        this.loading=false;
        this.$nextTick(() => {
          setTimeout(()=>{
            _this.isShowCtls=true;
          },1000)
        });
        this.indexWindows();
      }
    },
    async indexWindows(){
      let _this=this, res = await indexWindows();
      if (res.code == 200) {
        let timestamp=(new Date()).valueOf(),_boxTime=Local.get('boxTime');
        let _data=res.data,_new=[],_win=window.innerWidth-40;
        if(_boxTime){
            for (let key in _boxTime) {
              if(timestamp.valueOf()>=_boxTime[key]){
                Local.remove('boxTime');_boxTime=null;break;
              }
            }
        }
        _data.forEach((item,index)=>{
          let o={
            id:item.image_info.id,
            title:item.title,
            url:item.url,
            image:item.image,
            // width:(item.imageSize.width>_win?_win:item.imageSize.width),
            show:false,
          }
          if(!_boxTime){
            _new.push(o)
          }else{
            !_boxTime.hasOwnProperty(item.image_info.id)&&_new.push(o)
          }
        })
        if(_new.length){
          _new[0].show=true;
          this.boxData=_new;
          this.showBox=true;
        }
      }
    },
    closeBox(type,index,id){
      let _len=this.boxData.length-1,_boxTime=Local.get('boxTime'),_new={};
      let _today=this.dateFormat(new Date());
      let dayEnd=new Date(new Date(_today).getTime() + 24 * 60 * 60 * 1000 - 1);
      _boxTime&&(_new=_boxTime);
      if(type==1){
        _new[id]=(dayEnd).valueOf();
        Local.set('boxTime',_new)
      }
      if(index<_len){
        this.boxData[index].show=false;
        this.boxData[index+1].show=true;
      }else{
        this.showBox=false;
      }
    },
    showInfo(id){
      this.cardData={
        isShow:true,
        id:id
      }
    },
    async collect(obj,index,type){
      let _status=1;
          obj.collect&&(_status=0)
      let res = await myJobCollect({integrated_id:obj.id,status:_status});
      try {
        if(res.code==200){
          if(type==1){
            this.jobList[index].collect=_status;
          }else{
            this.jobList[index].collect=_status;
          }
        }
      } catch (error) {}
    },
    curToThousands(num){
      return toThousands(num)
    },
    dateFormat(date){
      return date.getFullYear()+'/'+(date.getMonth() + 1)+'/'+date.getDate()
    }
  },
  watch:{}
}
</script>
<style lang="scss" scoped>
  @import "@/assets/styles/index.scss";
</style>
